<template>
  <div :class="[className, 'animated', { [animateClassName]: isInView }]" ref="div">
    <slot />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'

defineProps({
  className: String,
  animateClassName: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['inView'])
const div = ref(null)
const isInView = ref(false)

onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.intersectionRatio > 0) {
          emit('inView')
          isInView.value = true
          observer.unobserve(entry.target)
        }
      })
    },
    {
      threshold: 0.2
    }
  )
  observer.observe(div.value!)
})
</script>
<style lang="scss" scoped>
.animated {
  opacity: 0;
}
</style>
